/**
 * @Author: liyongxuan
 * @Date: 2018-3-15 10:00:00
 * @description：子基金管理-拟设立基金
 */
<template>
<div>
  <div class="right">
    <el-row class="ca-title">
        <el-col :span="10">
            <h3>{{FOF?"拟投资基金":"拟设立基金"}}</h3>
        </el-col>
        <el-col :span="14">
            <div class="ca-pull-right">
                <el-button class="ca-color-download" icon="el-icon-plus" :disabled="!isNoAuth('拟投资基金-列表页-新建')" @click="toNewPro">{{FOF?'新建拟投资基金':'新建拟设立基金'}}</el-button>
            </div>
        </el-col>
    </el-row>
    <el-form ref="form" :model="form" status-icon class="ca-box ca-m-t-10" align="center">
        <el-row class="ca-m-t-20">
            <el-col :span="8">
                <el-form-item label="基金类型：" label-width="120px">
                    <el-select placeholder="请选择" v-model="form.fundType" style="width: 100%;">
                        <el-option v-for="(item,index) in initView.itemType" :label="item.name" :value="item.id" :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="基金名称：" label-width="120px">
                    <el-input v-model="form.name" placeholder="支持模糊查询" @keyup.enter.native="search"></el-input>
                </el-form-item>
            </el-col>                
            <el-col :span="4" :offset="4">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="downloadFile" :disabled="!isNoAuth('拟投资基金-列表页-下载')">下载</el-button>
            </el-col>
        </el-row>
    </el-form>
    <div class="ca-m-t-20">
      <el-table class="ca-table" @sort-change="sortChange" :data="listData">
        <el-table-column label="序号" type="index" align="left" width="80px">
            <template slot-scope="scope">
                <csRedDot :label="scope.$index+1+''" :showDot="scope.row.red==1?true:false" :type="1"></csRedDot>
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="基金名称" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tooltip :content="scope.row.fundName" placement="top">
                    <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="toDetailPage(scope.row.id)" :disabled="!getDetailIsNoAuth()">{{scope.row.fundName}}</el-button>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="投资母基金" align="left" show-overflow-tooltip v-if="FOF">
            <template slot-scope="scope">
                <el-button  class="ca-underline quasiFundStyle overflow-hidden" :disabled="item.existence" v-for="(item,index) in scope.row.quasiFundReserveFOFList" :key="index" type="text" @click="toMotherFund(item.id)">{{item.fundName}}</el-button>
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="基金经理" align="left">
            <template slot-scope="scope">
                {{scope.row.managerName}}
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="基金类型" align="left">
            <template slot-scope="scope">
                {{scope.row.fundType}}
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="拟设立日期" align="left">
            <template slot-scope="scope">
                {{scope.row.establishTime}}                
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="最近更新时间" align="left">
            <template slot-scope="scope">
                {{scope.row.lastContact}}                
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="基金地区" align="left">
            <template slot-scope="scope">
                {{scope.row.region}}                
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="拟设立规模</br>（万元）" :render-header="renderTitle" align="left">
            <template slot-scope="scope">
                {{scope.row.scale}}
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" label="节点" align="left">
            <template slot-scope="scope">
                {{scope.row.progress}}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="left">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteFundItem(scope.row.id)" :disabled="!isNoAuth('拟投资基金-列表页-删除')">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="changePage"
            :current-page="form.pageIndex"
            :page-sizes="vuePageSizes"
            :page-size="vuePageSize"
            :page-count="totalPage"
            :total="totalCount"
            layout="total, sizes, prev, pager, next, jumper"
            class="use-list-pagination">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import { api } from './api';
import { apiHttp, STATUS_HTTP_SUCCESS } from '__service/csHttp';
import { isNoAuth } from '__service/utils';
export default {
  data() {
    return {
        tabList: ['基金详情', '立项', '协议签署', '基金注册', '基金打款', '基金文件', '合伙人'],//tab名称
        isAuthIndexSee: isNoAuth('拟投资基金-列表页-查看'),
        listData: [],
        totalPage: 0,//总页数
        totalCount: 0,//总记录数
        form: {
            name: '',//基金名称
            orderBy: '',
            sort: '',
            fundType: '',//基金类型
            fundState: '0',
            pageIndex: 1,//页号
            pageSize: 30,//每页条数
        },//搜索参数
        searchParams: {
            name: '',
            fundType: ''
        },
        initView: {
            itemType: [{id: null,name: '全部'},...this.$store.state.user.dictionaryMap.fundType],
        }
    }
  },
  beforeRouteEnter(to, from, next) {
        next(vm => {
            if (!vm.isAuthIndexSee) {
                vm.$message({message: '没有此页面的操作权限',type: 'error',center: true});
                vm.$router.replace({name: 'personal-center', params: {tabIndex: '0', openWindow: false}})
                // return vm.$router.go(-1);
            }
        });
    },
  mounted() {
      this.getFundAnsatReserves()
  },
  methods: {
    // 判断进入详情页权限
    getDetailIsNoAuth() {
      let flag = false;
      for (let i = 0; i < this.tabList.length; i++) {
        if (isNoAuth(`拟投资基金-${this.tabList[i]}-查看`)) {
          flag = true
        }
      }
      if (flag) {
        return flag
      }
      return flag
    },
    //   查询
    search() {
        this.form.pageIndex = 1
        this.searchParams.name = this.form.name
        this.searchParams.fundType = this.form.fundType
        this.getFundAnsatReserves()
    },
    // 下载文件
    downloadFile() {
        if (this.totalCount === 0) {
            this.$message({
                type: 'warning',
                message: '暂无数据',
                center: true
            })
        } else {
            window.open(this.baseURL + api.DOWNLOAD_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=5&name=' + this.searchParams.name + '&fundType=' + this.searchParams.fundType + '&fundState=0');
        }
    },
    // 查询列表
    async getFundAnsatReserves() {
        const {resCode,data} = await apiHttp(api.GET_FUND_ANSAT_RESERVES,this.form)
        if (resCode === STATUS_HTTP_SUCCESS) {
            this.listData = data.resultData
            this.totalPage = data.totalPage
            this.totalCount = data.totalCount
        }
    },
    // 新建拟设立基金
    toNewPro() {
        this.$router.push({name: 'pre-investment-funds-add',params: {itemId: '-1', openWindow: true}})
    },
    // 点击基金名称 进入详情页
    toDetailPage(itemId) {
        this.$router.push({name: 'pre-investment-funds',params: {itemId,tabIndex: 0, openWindow: true}})
    },
    // 点击母基金名称 进入母基金详情页
    toMotherFund(itemId) {
        this.$router.push({name: 'invested-FOF',params: {itemId,tabIndex: '0', openWindow: true}})
    },
    //删除按钮
    deleteFundItem(itemId) {
        this.$confirm('是否删除', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
        }).then(() => {
            apiHttp(api.DEL_FUND_ANSAT,{fundId: itemId}).then(res => {
                if (res.resCode === STATUS_HTTP_SUCCESS) {
                    this.getFundAnsatReserves()
                    this.$message({type: 'success',message: '删除成功',center: true})
                }
            })
        })
    },
    //排序
    sortChange(params) {
        if (!params.order) {
            this.form.orderBy = '';
            this.form.sort = '';
        } else {
            this.form.sort = params.order === 'ascending' ? 'asc' : 'desc';
            this.form.orderBy = params.prop;
            this.getFundAnsatReserves();
        }
    },
    // 改变页码
    changePage(val) {
        this.form.pageIndex = val
        if (val > this.totalPage) {
            this.form.pageIndex = this.totalPage
        }
        this.getFundAnsatReserves()
    },
    // 改变每页条数
    handleSizeChange(val) {
        this.form.pageSize = val
        this.form.pageIndex = 1
        this.getFundAnsatReserves()
    }
  },
  components: {
    csRedDot: require('__components/red-dot'), // 小红点
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 20px  25%;
}
.overflow-hidden{
    width: 101%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quasiFundStyle{
    display: block;
    margin: auto;
}
</style>